import React, { useEffect, useState } from 'react';
import {
    StyleSheet, View, Text,
    ImageBackground
} from 'react-native';
import Button from '@/app/components/Button'
import Events from './event';
import { size } from '@/app/utils';

let WeiKaiFang = () => {

    let [loading, setLoading] = useState(false);
    useEffect(() => {
        Events.addListener("weikaifang", _loading)
    }, [])

    const _loading = (bl: boolean) => {
        setLoading(bl);
    }

    return (
        loading ? <View style={[styles.loading, { zIndex: loading ? 10 : -1 }]}>
            <ImageBackground style={styles.loadingbox} source={
                require('@/assets/images/weikaifangbg.png')
            }>
                <View style={{ flex: 1, paddingLeft: size(50), paddingRight: size(50) }}>
                    <Text style={styles.loadText}>This feature is temporarily unavailable</Text>
                </View>
                <View style={{ marginBottom: size(20), width: "100%", paddingLeft: size(20), paddingRight: size(20) }}>
                    <Button
                        onClick={() => {
                            global.$cweikaifang() //使用loading
                        }}
                        style={styles.login_box_footer_btn}
                    >
                        <Text style={[styles.login_box_footer_btn_text]}>Close</Text>
                    </Button>
                </View>
            </ImageBackground>
        </View> : null
    )
}

const styles = StyleSheet.create({
    loading: {
        position: "absolute",
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        zIndex: 999,
        elevation: 999,
        backgroundColor: "rgba(0,0,0,0.2)",
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
    },
    loadingbox: {
        width: size(337),
        height: size(279),
        flexDirection: 'column',
        alignItems: 'center',
        borderRadius: size(6),
    },
    loadText: {
        color: '#1A1A1A',
        fontSize: size(20),
        marginTop: size(128),
        textAlign: 'center',
    },
    login_box_footer_btn: {
        width: '100%',
        backgroundColor: '#38B781',
        alignItems: 'center',
        borderRadius: 25.5,
    },
    login_box_footer_btn_text: {
        height: size(45),
        lineHeight: size(45),
        textAlign: 'center',
        color: '#fff',
        fontSize: size(17),
    },
})

export default WeiKaiFang;